<template>
  <div class="mod-member__member">
    <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()">
      <el-form-item>
        <el-input v-model="state.dataForm.uname" placeholder="用户名" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="state.dataForm.channelCode" placeholder="渠道到编码" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="state.dataForm.puname" placeholder="邀请人" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="state.dataForm.referralCode" placeholder="推荐码" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="state.dataForm.balance" placeholder="余额 >" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="state.dataForm.bounty" placeholder="赏金 >" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model="daterange" type="daterange" placeholder="注册日期" value-format="YYYY-MM-DD" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="daterangeChangeHandle"> </el-date-picker>
      </el-form-item>
      <el-form-item>
        <ren-select v-model="state.dataForm.status" dict-type="member_status" placeholder="状态"></ren-select>
      </el-form-item>
      <el-form-item>
        <ren-select v-model="state.dataForm.online" dict-type="yes_no" placeholder="是否在线"></ren-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="state.dataForm.levelId" placeholder="等级" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="state.dataForm.flagIds" placeholder="会员标签" clearable>
          <el-option v-for="(item, index) in flagIds" :key="index" :value="item.id" :label="item.name">{{ item.name }}</el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="state.getDataList()">{{ $t("query") }}</el-button>
      </el-form-item>
      <!--      <el-form-item>
        <el-button type="info" @click="state.exportHandle()">{{ $t("export") }}</el-button>
      </el-form-item>-->
      <!--      <el-form-item>
        <el-button v-if="state.hasPermission('member:member:save')" type="primary" @click="addOrUpdateHandle()">{{ $t("add") }}</el-button>
      </el-form-item>-->
      <!--      <el-form-item>
        <el-button v-if="state.hasPermission('member:member:delete')" type="danger" @click="state.deleteHandle()">{{ $t("deleteBatch") }}</el-button>
      </el-form-item>-->
    </el-form>
    <el-table v-loading="state.dataListLoading" :data="state.dataList" border @selection-change="state.dataListSelectionChangeHandle" style="width: 100%">
      <el-table-column prop="uname" label="用户名" min-width="130" header-align="center" align="center">
        <template #default="scope">
          <el-link type="primary" @click="memberDetailHandle(scope.row)">{{ scope.row.uname }}</el-link>
          <el-icon @click="onCopyHandle(scope.row.uname)" style="margin-left: 4px; cursor: pointer"><DocumentCopy /></el-icon>
        </template>
      </el-table-column>
      <el-table-column prop="channelCode" label="获客渠道" min-width="100" header-align="center" align="center"></el-table-column>
      <el-table-column prop="puname" label="邀请人" min-width="120" header-align="center" align="center"></el-table-column>
      <el-table-column prop="referralCode" label="推荐码" header-align="center" align="center"></el-table-column>
      <!--
      <el-table-column prop="mobile" label="手机号" header-align="center" align="center"></el-table-column>
-->
      <el-table-column prop="balance" label="余额" header-align="center" align="center"></el-table-column>
      <el-table-column prop="frozenBalance" label="出售中" header-align="center" align="center"></el-table-column>
      <el-table-column prop="bounty" label="任务赏金" min-width="100" header-align="center" align="center"></el-table-column>
      <el-table-column prop="commission" label="佣金" header-align="center" align="center"></el-table-column>
      <el-table-column prop="createDate" label="注册时间" width="160" header-align="center" align="center"></el-table-column>
      <el-table-column prop="status" label="状态" header-align="center" align="center">
        <template v-slot="scope">
          <dict-label dict-type="member_status" :dict-value="scope.row.status" :status="{ 2: 'warning', 3: 'danger' }"></dict-label>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="在线状态" min-width="150" header-align="center" align="center">
        <template v-slot="scope">
          <template v-if="calculateOnlineTime(scope.row.offlineTime, scope.row.onlineTime)['status'] === 'online'">
            <div style="display: flex">
              <el-tag class="ml-2" type="success">在线</el-tag>
              <p class="info">{{ calculateOnlineTime(scope.row.offlineTime, scope.row.onlineTime)["text"] }}</p>
            </div>
          </template>
          <template v-if="calculateOnlineTime(scope.row.offlineTime, scope.row.onlineTime)['status'] === 'offline'">
            <div style="display: flex">
              <el-tag class="ml-2" type="warning">离线</el-tag>
              <p class="info">{{ calculateOnlineTime(scope.row.offlineTime, scope.row.onlineTime)["text"] }}</p>
            </div>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="levelId" label="等级" header-align="center" align="center"></el-table-column>
      <el-table-column prop="telegram" label="用户TG" header-align="center" align="center">
        <template v-slot="scope">
          <el-link type="primary" @click="openTgHandle(1, scope.row.telegram)">{{ scope.row.telegram || "-" }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="所属社群" header-align="center" align="center">
        <template v-slot="scope">
          <el-link type="primary" @click="openTgHandle(2, scope.row.telegramGroup)">{{ scope.row.telegramGroup || "-" }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="flagIds" label="标签" header-align="center" align="center">
        <template v-slot="scope">
          <div>
            <el-tooltip class="box-item" effect="dark" :content="item.name" placement="top-start" v-for="(item, index) in matchTags(scope.row.flagIds)" :key="index">
              <svg class="iconfont" aria-hidden="true" :color="item.paramJsonObj?.color">
                <use :xlink:href="`#${item.paramJsonObj?.icon}`"></use>
              </svg>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
        <template v-slot="scope">
          <el-button v-if="state.hasPermission('member:member:update')" type="primary" link @click="addOrUpdateHandle(scope.row.id)">{{ $t("update") }}</el-button>
          <el-dropdown @command="moreCommandHandle($event, scope.row.id)">
            <span class="el-dropdown-link">
              更多
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="updateBalance" v-if="state.hasPermission('member:member:balance')">修改余额</el-dropdown-item>
                <el-dropdown-item command="updateStatus" v-if="state.hasPermission('member:member:status')">修改状态</el-dropdown-item>
                <el-dropdown-item command="updateFlag">会员标签</el-dropdown-item>
                <el-dropdown-item command="updatePwd" v-if="state.hasPermission('member:member:pwd')">修改密码</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <!--
          <el-button v-if="state.hasPermission('member:member:delete')" type="primary" link @click="state.deleteHandle(scope.row.id)">{{ $t("delete") }}</el-button>
-->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit" :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle" @current-change="state.pageCurrentChangeHandle"> </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update :key="addKey" ref="addOrUpdateRef" @refreshDataList="state.getDataList"></add-or-update>
    <update-status ref="updateStatusRef" @refreshDataList="state.getDataList"></update-status>
    <update-pwd ref="updatePwdRef" @refreshDataList="state.getDataList"></update-pwd>
    <update-balance ref="updateBalanceRef" @refreshDataList="state.getDataList"></update-balance>
    <update-flag ref="updateFlagRef" @refreshDataList="state.getDataList"></update-flag>
    <member-detail-drawer ref="memberDetailRef" :key="addKey" @refreshDataList="state.getDataList"></member-detail-drawer>
  </div>
</template>

<script lang="ts" setup>
import useView from "@/hooks/useView";
import { ElMessage } from "element-plus";
import { nextTick, reactive, ref, toRefs, onMounted } from "vue";
import AddOrUpdate from "./member-add-or-update.vue";
import MemberDetailDrawer from "@/views/member/member-detail-drawer.vue";
import UpdateStatus from "@/views/member/member-update-status.vue";
import UpdatePwd from "@/views/member/member-update-pwd.vue";
import UpdateBalance from "@/views/member/member-update-balance.vue";
import UpdateFlag from "@/views/member/member-update-flag.vue";
import dayjs from "dayjs";
import { DocumentCopy } from "@element-plus/icons-vue";
import duration from "dayjs/plugin/duration";
import baseService from "@/service/baseService";
import { copyToClipboard, calculateTimeDifference } from "@/utils/utils";
dayjs.extend(duration);

const view = reactive({
  getDataListURL: "/member/member/page",
  getDataListIsPage: true,
  exportURL: "/member/member/export",
  deleteURL: "/member/member",
  deleteIsBatch: true,
  dataForm: {
    uname: "",
    balance: "",
    pwd: "",
    channelId: "",
    channelCode: "",
    online: "",
    bounty: "",
    pid: "",
    puname: "",
    referralCode: "",
    mobile: "",
    name: "",
    createDate: "",
    status: "",
    levelId: "",
    flagIds: "",
    beginDate: "",
    endDate: ""
  }
});

const daterange: any = ref([]);
const daterangeChangeHandle = (val: any) => {
  if (!val) {
    state.dataForm.beginDate = "";
    state.dataForm.endDate = "";
    return;
  }
  state.dataForm.beginDate = val[0];
  state.dataForm.endDate = val[1];
};

const state = reactive({ ...useView(view), ...toRefs(view) });

const flagIds: any = ref([]);

const addKey = ref(0);
const addOrUpdateRef = ref();
const addOrUpdateHandle = (id?: number) => {
  addKey.value++;
  nextTick(() => {
    addOrUpdateRef.value.init(id);
  });
};

const memberDetailRef = ref();
const memberDetailHandle = (row?: any) => {
  addKey.value++;
  nextTick(() => {
    let info = {
      ...row,
      memberId: row.id
    };
    memberDetailRef.value.init(info);
  });
};

const openTgHandle = (type: any, value: any) => {
  if (!value) return;
  var istg = /t\.me/.test(value);
  if (istg) {
    window.open(`${value}`, "_blank", "width=500,height=500,toolbar=no");
  } else {
    if (value.includes("@")) {
      value = value.replace("@", "");
    }
    window.open(`https://t.me/${value}`, "_blank", "width=500,height=500,toolbar=no");
  }
};

const updateStatusRef = ref();
const updatePwdRef = ref();
const updateBalanceRef = ref();
const updateFlagRef = ref();
const moreCommandHandle = (command: string, id?: number) => {
  nextTick(() => {
    if (command === "updateStatus") {
      updateStatusRef.value.init(id);
    }
    if (command === "updatePwd") {
      updatePwdRef.value.init(id);
    }
    if (command === "updateBalance") {
      updateBalanceRef.value.init(id);
    }
    if (command === "updateFlag") {
      updateFlagRef.value.init(id);
    }
  });
};

/**
 * 计算在线时间
 * @param {string} offlineTime 离线时间
 * @param {string} onlineTime  上线时间
 */
const calculateOnlineTime = (offlineTime?: any, onlineTime?: any) => {
  if ((!offlineTime && !onlineTime) || !onlineTime) {
    return {
      status: "offline",
      text: `-`
    };
  }
  let _onlineTime = new Date(onlineTime).getTime();
  let _offlineTime = offlineTime ? new Date(offlineTime).getTime() : null;
  return calculateTimeDifference(_onlineTime, _offlineTime);
};

// 获取会员标签
const getTags = () => {
  baseService.get("/member/flag/all").then((res) => {
    flagIds.value = res.data;
  });
};

// 匹配会员标签
const matchTags = (ids: any) => {
  let flagids: any = [];
  if (ids) {
    try {
      let flag = JSON.parse(ids);
      if (flag !== 0) {
        flagids = flag;
      }
    } catch (error) {
      console.log(error);
    }
  }
  let result: any = flagIds.value.filter((item: any) => flagids.includes(item.id));
  return result;
};

const onCopyHandle = (val: string) => {
  copyToClipboard(val);
  ElMessage.success("复制成功");
};

onMounted(() => {
  getTags();
});
</script>

<style scoped>
.info {
  margin: 0;
  margin-top: 4px;
  line-height: 16px;
  font-size: 12px;
}
:deep(.el-table-fixed-column--right .cell) {
  display: flex;
  justify-content: center;
}
.el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
  margin-left: 10px;
}
</style>
